import Vue from "vue";
import Vuex from "vuex";
import { setItem, getItem } from "@/utils/localStorage.js";

Vue.use(Vuex);

// Vuex 容器中的数据只是为了方便在其他任何地方能方便的获取登录状态数据，但是页面刷新还是会丢失数据状态
//所以我们还要把 ** 数据进行持久化 ** 中以防止页面刷新丢失状态的问题
export default new Vuex.Store({
  //保存公共的数据
  state: {
    // 在设置vuex中的初值时，先从本地存储中取，如果取不到，则初始为空
    tokenInfo: getItem("tokenInfo") || {},
    //1.创建一个值 photo存储
    photo: ""
  },
  mutations: {
    //保存和更新token
    // 目的 每次更新 tokenInfo 同时更新 storage
    setTokenInfo(state, obj) {
      state.tokenInfo = obj;
      setItem("tokenInfo", obj);
    },
    clearTokenInfo(state) {
      // 相当于就是清空
      state.tokenInfo = {};
      setItem("tokenInfo", {});
    },
    //更新token
    onlyToken(state, token) {
      //1.把token 赋值给tokenInfo.token
      state.tokenInfo.token = token;
      //2.把tokenInfo 赋值给setItem("tokenInfo")
      setItem("tokenInfo", state.tokenInfo);
    },
    //2.创建一个函数，把头像存到photo里
    savePhoto(state, photosrc) {
      state.photo = photosrc;
      setItem("photo", photosrc);
    },
    clearPhoto(state) {
      state.photo = {};
      setItem("photo", {});
    }
  },
  getters: {
    isLogin(state) {
      if (state.tokenInfo.token) {
        return true;
      } else {
        return false;
      }
    }
  }
});
